const path = require('path');

//导入在内存中生存html页面的插件

//这个插件的作用
//1.自动在内存中根据指定的页面生成一个内存页面
//2.自动把打包好的index.js放到html中去
const htmlwebpackplugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin');


//分离css文件
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');s



module.exports = {
    // mode: 'production',
    entry: {
        app: './src/main.js',
    }, //入口文件
    output: {
        path: path.join(__dirname, './dist/js'), //输出文件的目录
        filename: 'index.js' //输出文件的名称
    },
    devServer: { //这里是配置dev-server命令参数的第二种形式
        open: true, //自动打开浏览器
        contentBase: 'src', //指定托管根目录
        port: 3000, //指定端口号
        hot: true, //启用热更新
    },
    plugins: [ //配置插件的节点
        new htmlwebpackplugin({
            template: path.join(__dirname, './src/index.html'), //模板路径
            filename: 'index.html', //指定生成页面的名字
            // minify: {
            //     removeAttributeQuotes: true, //删除文件内的双引号
            //     collapseWhitespace: true, //删除文件内的空格换行
            // },
            // hash: true, //为引用的文件添加一个 hash值
        }),
        // new MiniCssExtractPlugin({
        //     filename: './index.css'
        // }),
        new VueLoaderPlugin()

    ],
    module: { //这个节点 用来配置所有的第三方模块 加载器
        rules: [

            {
                test: /\.css$/,
                use: [
                    // MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [require('autoprefixer')]
                        }
                    }
                ]
            }, //配置处理css文件的第三方loader
            {
                test: /\.(ttf|eot|svg|woff|woff2|otf)$/,
                use: 'url-loader'
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: 'url-loader?limit=4279&name=[name]-[hash:7].[ext]'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/, //匹配时排除该文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'], //预设
                        plugins: [
                            '@babel/plugin-proposal-class-properties' //针对class
                        ]
                    }
                }
            },

            {
                test: /\.vue$/,
                use: 'vue-loader'
            }

        ]

    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },

}